<template>
	<div class="absolute-box standrad-box">
		<div class="content-box">
			<div class="title font-bold">标准明细</div>
			<div class="zs-space-bottom-bg zs-layout-flex-row zs-layout-justify-between">
				<div style="width: 100%">
					<el-select v-model="queryParams.inspectionType" class="zs-select-md zs-space-right-sm" placeholder="类型" @change="queryList" clearable>
						<el-option v-for="item in standradTypeList" :key="item.id" :label="item.dicName" :value="item.id" />
					</el-select>
					<el-popover popper-class="zs-popper standrad-info-popper" placement="bottom-end" trigger="click">
						<template #reference>
							<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.inspectionName || queryParams.inspectionCode }">
								<el-icon>
									<MoreFilled />
								</el-icon>
							</el-button>
						</template>
						<template #default>
							<el-input v-model="queryParams.inspectionName" class="zs-select-md zs-space-right-sm" placeholder="标准名称" clearable @blur="queryList" />
							<el-input v-model="queryParams.inspectionCode" class="zs-select-md zs-space-right-sm" placeholder="标准编号" clearable @blur="queryList" />
						</template>
					</el-popover>
					<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
				</div>
			</div>
			<div class="list-box">
				<template v-if="tableData.data.length > 0">
					<div v-for="(item, index) in tableData.data" :key="index" :class="index > 0 ? 'zs-space-top-bg' : ''">
						<div class="title-box cell zs-layout-flex-row zs-layout-items-center">
							<el-checkbox v-model="item.flag" @change="chooseNode(item)" />
							<span class="font-bold pad-left-s">【{{ item.inspectionCode }}】</span>
							<span class="font-bold pad-left-s">【{{ item.inspectionName }}】</span>
							<span class="font-bold">【{{ item.inspectionTypeValue }}】</span>
						</div>
						<div class="cell zs-layout-flex-row zs-layout-items-center" v-for="(child, childIndex) in item.list" :key="childIndex">
							<div>{{ childIndex + 1 }}</div>
							<el-tooltip v-if="showTooltip[`${index}-${childIndex}`]" class="box-item" effect="dark" :content="child.inspectionContent">
								<div :ref="setRef(index, childIndex)" class="content one-line-ellipsis">{{ child.inspectionContent }}</div>
							</el-tooltip>
							<div v-else :ref="setRef(index, childIndex)" class="content one-line-ellipsis">{{ child.inspectionContent }}</div>
						</div>
					</div>
				</template>
				<el-empty style="margin-top: 20%" v-else description="暂无数据" />
			</div>
			<div v-if="tableData.data.length > 0" class="zs-space-top-sm zs-table-page-pagination absolute-box paging">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, prev, pager, next, jumper" :total="tableData.total" @current-change="pageChange('page', $event)" />
			</div>
		</div>
		<div class="footer absolute-box">
			<el-button class="zs-btn-md" @click="closePage">关闭</el-button>
			<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">确定</el-button>
		</div>
	</div>
</template>

<script setup>
	import { standradChooseListApi } from '@/api/inspect.js';
	import { ref, reactive, watchEffect, nextTick } from 'vue';
	import { ElMessageBox } from 'element-plus';
	import { useStore } from 'vuex';
	let store = useStore();
	const props = defineProps({
		planId: { type: Number },
		isBatch: { type: Boolean, default: false },
		currentPoint: { type: Object },
		standradTypeList: { type: Object },
	});
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const curPageSizes = ref(store.state.uiPageSizes);
	const emit = defineEmits(['closeInfoPage', 'confirmInfoPage']);
	let queryParams = reactive({ pageNumber: 1, pageSize: curPageSize.value, planId: props.planId });
	const showTooltip = reactive({});
	const elRefs = ref(new Map());
	const setRef = (index, childIndex) => el => {
		if (el) {
			elRefs.value.set(`${index}-${childIndex}`, el);
		}
	};

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//选中的标准
	let chooseNodeIdList = ref([]);
	const chooseNode = data => {
		if (data.flag) {
			chooseNodeIdList.value = [data.inspectionStandardId]
			tableData.data.forEach(item => {
				item.flag = item.inspectionStandardId == data.inspectionStandardId ? true : false
			})
		} else {
			chooseNodeIdList.value = []
		}
		// 多选的版本
		// const index = chooseNodeIdList.value.findIndex(id => id === data.inspectionStandardId);
		// if (data.flag) {
		// 	index == -1 && chooseNodeIdList.value.push(data.inspectionStandardId);
		// } else {
		// 	index !== -1 && chooseNodeIdList.value.splice(index, 1);
		// }
	};

	// 列表数据源
	const queryList = async () => {
		queryParams.pointId = props.isBatch || !props.currentPoint.list ? null : props.currentPoint.pointId;
		let res = await standradChooseListApi(queryParams);
		if (res.data.code != 200) return;
		res.data.data.list &&
			res.data.data.list.forEach(item => {
				item.flag = chooseNodeIdList.value.includes(item.inspectionStandardId) ? true : false;
			});
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total;
		setTimeout(() => {
			shoeTooltip();
		}, 0);
	};

	const closePage = () => {
		emit('closeInfoPage');
	};

	const doConfirm = () => {
		if (chooseNodeIdList.value.length == 0) {
			ElMessageBox.confirm('您没有选择标准，确认解绑?').then(() => {
				emit('confirmInfoPage', chooseNodeIdList.value || []);
			});
		} else {
			emit('confirmInfoPage', chooseNodeIdList.value || []);
		}
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList();
	};

	const initFn = () => {
		queryParams.inspectionType = '';
		queryParams.inspectionName = '';
		queryParams.inspectionCode = '';
		queryList();
	};

	//判断超出省略才显示tooltip
	const shoeTooltip = () => {
		tableData.data.forEach((item, index) => {
			if (item.list && item.list.length > 0) {
				item.list.forEach((child, childIndex) => {
					const key = `${index}-${childIndex}`;
					const contentElement = elRefs.value.get(key);
					if (contentElement) {
						showTooltip[key] = contentElement.scrollWidth > contentElement.clientWidth;
					}
				});
			}
		});
	};

	watchEffect(() => {
		if (props.isBatch) {
			chooseNodeIdList.value = [];
		} else {
			chooseNodeIdList.value = props.currentPoint.list || [];
		}
	});

	defineExpose({ initFn });
</script>

<style scoped lang="scss">
	.standrad-box {
		width: calc(100vw - 1000px);
		height: 100%;
		top: 0;
		right: 920px;
		background: #fff;
		z-index: 4000;
		p {
			font-size: 13px;
		}
		.content-box {
			padding: 20px 20px 97px 20px;
			.title {
				font-size: 18px;
				padding: 20px 0 20px;
			}
			.list-box {
				overflow: auto;
				height: calc(100vh - 270px);
				.title-box {
					background: #f5f4f5;
					padding-left: 17px !important;
					.font-bold {
						padding-left: 14px !important;
					}
					.pad-left-s {
						padding-left: 30px;
					}
				}
				.cell {
					height: 36px;
					line-height: 36px;
					padding-left: 20px;
					border-bottom: 1px solid #f1efef;
					.content {
						padding-left: 20px;
						flex: 1;
					}
				}
			}
			.paging {
				bottom: 73px;
				right: 10px;
			}
		}
		.footer {
			width: calc(100% - 20px);
			bottom: 0;
			height: 53px;
			background: #f0f0f0;
			padding: 10px 20px 0 0;
			text-align: right;
			border-top: 1px solid #dedede;
		}
	}
	.standrad-box::after {
		content: '';
		position: absolute;
		top: 50%;
		right: -20px;
		transform: translateY(-50%);
		border: 10px solid transparent;
		z-index: 9999;
		border-left-color: white; /* 三角形颜色 */
	}
	.font-bold {
		font-weight: 700;
	}
</style>
